<template>
  <view>
    <view class="content">
      <view class="name">
        <text>对方账户</text>
        <input type="text" placeholder="速付宝账户/手机号码">
        <image src="../../images/my/txl-icon.png"></image>
      </view>
      <text class="explain">钱将实时转入对方账户，无法退款</text>
      <view class="type-wrap">
        <span>转账类型</span>
        <view class="select-type">
          <picker class="picker" :value="index" :range="array" @change="bindPickerChange">
            <view>{{array[index]}}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="btn-wrap">
      <button id="next-btn" class="c1 bg-c3 fs30" @click="targetUrl">下一步</button>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {},
  data() {
    return {
      array: ["啊币", "美元"],
      index: 0
    };
  },
  methods: {
    bindPickerChange: function(e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index = e.target.value;
    },
    targetUrl() {
      uni.navigateTo({
        url: "/pages/HomePage/Accounts/affirmAccounts"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";

.content {
  margin-top: 50upx;
  input {
    padding-left: 25upx;
  }
  input::-webkit-input-placeholder {
    color: #ccc;
  }

  .name {
    height: 80upx;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 50upx;
    image {
      width: 50upx;
      height: 50upx;
    }
  }
  .explain {
    display: inline-block;
    margin: 10upx 40upx;
    color: #aaa;
    font-size: 24upx;
  }
  .type-wrap {
    background: #fff;
    display: flex;
    align-items: center;
    height: 80upx;
    padding: 0 50upx;
    .select-type {
      position: relative;
      padding-left: 6upx;
      .picker {
        appearance: none;
        border: none;
        background: #fff;
        padding-left: 20upx;
      }
      &:after {
        content: "";
        position: absolute;
        right: -25upx;
        top: 34%;
        width: 0;
        height: 0;
        border-left: 10upx solid transparent;
        border-right: 10upx solid transparent;
        border-top: 20upx solid #00a0e9;
      }
    }
  }
}
.btn-wrap {
  width: 80%;
  height: 70upx;
  margin: 50upx auto;
  button {
    width: 100%;
    height: 100%;
    line-height: 70upx;
    border: none;
    border-radius: 4upx;
  }
}
</style>